<div>
	<?php if($doc_name == "home" && $doc_id == "1"){ // Start Home Header ?>
	<div style="width:1000px; height:290px;">
		<!-- Start Advanced Gallery Html Containers -->
		<div id="gallery" class="content">
			<div class="slideshow-container">
				<div id="loading" class="loader"></div>
				<div id="slideshow" class="slideshow"></div>
			</div>
		</div>
		<div id="thumbs" class="navigation">
			<div id="caption" class="caption-container"></div>
			<div style="clear:both;"></div>
			<div id="thumbnail">
				<div class="thumb-img">
					<ul class="thumbs noscript">
						<?php 
							$sql = "select a.* , c.filename
									from tbl_header a 
										left join ms_module b 
											on 		a.moduleid = b.moduleid 
												and b.stsrc = 'A' 
										left join ms_file c
											on a.headerurlimage = c.fileid and c.filerole = 'image' and c.stsrc = 'A'
									where 	a.stsrc = 'A' 
										and b.modulename = '".$doc_name."' 
										and b.moduleid = '".$doc_id."' 
										and a.headerstatus = 1 
									order by a.headerposition asc 
									limit 0,12
									";
							$exe = mysql_query($sql) or die(mysql_error());
							$num = mysql_num_rows($exe);
							
							if($num > 0)
							{
								while($row = mysql_fetch_array($exe))
								{
						?>
						<li>
							<a class="thumb" name="<?php echo $row['headername']; ?>" href="<?php echo getURLdomain()."/upload/".$row['filename']; ?>" title="<?php echo $row['headerlabel']; ?>">
								<img src="<?php echo getURLdomain()."/upload/".$row['filename']; ?>" alt="<?php echo $row['headerlabel']; ?>" />
							</a>
							<div class="caption">
								<div class="download">
									<a <?php if($row['headerurlhref'] != ""){ ?> href="<?php echo $row['headerurlhref']; ?>" <?php } ?>><?php // URL Href ?>
										<div class="image-title"><?php echo $row['headerlabel']; ?></div><?php // Img Label ?>
										<div class="image-desc"><?php echo $row['headerdescription']; ?></div><?php // Img Description ?>
									</a>
								</div>
							</div>
						</li>
						<?php
								}
							}
						?>
					</ul>
				</div>
			</div>
		</div>
		<div style="clear: both;"></div>
	</div>
	<?php 
		// End Home Header
		}else{
		// Start Other Header
	?>
	<div style="width:1000px; height:190px;">
		<?php 
			$sql = "select a.* , c.filename
					from tbl_header a 
						left join ms_module b 
							on a.moduleid = b.moduleid and b.stsrc = 'A' 
						left join ms_file c
							on a.headerurlimage = c.fileid and c.filerole = 'image' and c.stsrc = 'A'
					where a.stsrc = 'A' and b.modulename = '".$doc_name."' and b.moduleid = '".$doc_id."' and a.headerstatus = 1 
					order by a.headerposition asc 
					limit 0,1";
			$exe = mysql_query($sql) or die(mysql_error());
			$num = mysql_num_rows($exe);
			$row = mysql_fetch_array($exe);
			
			if($num > 0)
			{
		?>
		<img src="<?php echo getURLdomain()."/upload/".$row['filename']; ?>" style="width:1000px; height:190px;" alt="<?php echo $row['headerdescription']; ?>" />
		<?php
			}
		?>
	</div>
	<?php 
		// End Other Header
		} 
	?>
</div>

<script type="text/javascript">
	jQuery(document).ready(function($) {
		// We only want these styles applied when javascript is enabled
		//$('div.navigation').css({'width' : '198px', 'height' : '288px',  'float' : 'left', 'border' : 'solid 1px black'});
		$('div.content').css('display', 'block');

		// Initially set opacity on thumbs and add
		// additional styling for hover effect on thumbs
		var onMouseOutOpacity = 0.67;
		$('#thumbs ul.thumbs li').opacityrollover({
			mouseOutOpacity:   onMouseOutOpacity,
			mouseOverOpacity:  1.0,
			fadeSpeed:         'fast',
			exemptionSelector: '.selected'
		});
		
		// Initialize Advanced Galleriffic Gallery
		var gallery = $('#thumbs').galleriffic({
			delay:                     2500,
			numThumbs:                 12,
			preloadAhead:              12,
			enableTopPager:            false,
			enableBottomPager:         false,
			maxPagesToShow:            1,
			imageContainerSel:         '#slideshow',
			controlsContainerSel:      '#controls',
			captionContainerSel:       '#caption',
			loadingContainerSel:       '#loading',
			renderSSControls:          true,
			renderNavControls:         true,
			playLinkText:              'Play Slideshow',
			pauseLinkText:             'Pause Slideshow',
			prevLinkText:              '&lsaquo; Previous Photo',
			nextLinkText:              'Next Photo &rsaquo;',
			nextPageLinkText:          'Next &rsaquo;',
			prevPageLinkText:          '&lsaquo; Prev',
			enableHistory:             false,
			autoStart:                 true,
			syncTransitions:           true,
			defaultTransitionDuration: 900,
			onSlideChange:             function(prevIndex, nextIndex) {
				// 'this' refers to the gallery, which is an extension of $('#thumbs')
				this.find('ul.thumbs').children()
					.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
					.eq(nextIndex).fadeTo('fast', 1.0);
			},
			onPageTransitionOut:       function(callback) {
				this.fadeTo('fast', 0.0, callback);
			},
			onPageTransitionIn:        function() {
				this.fadeTo('fast', 1.0);
			}
		});
	});
</script>
